<!DOCTYPE HTML>
<html>
	<head>
		<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
		<title>WebDb by Q</title>
		<script type="text/javascript" src="firebug/firebug.js">
		{
			startOpened: false
		}
		</script>
		<script type="text/javascript" src="js/3rdparty.js"></script>
		<script type="text/javascript" src="js/data.js"></script>
		<script type="text/javascript" src="js/init.js"></script>
		<script type="text/javascript" src="js/functions.js"></script>
		<script type="text/javascript" src="js/Syncer.js"></script>
		<link rel="stylesheet" href="style/main.css" type="text/css" />
		<link rel="icon" type="image/png" href="http://localhost/images/webdb.png" />
	</head>
	<body onload="init()">
		<div id="issues"></div>
		<div class="top">
			<div id="controlPanel"><!--  style="display: none;" checked="checked" -->
				<label><input id="autosync" type="checkbox" onchange="if (this.checked) { syncer.sync(); } else { syncer.clearTimer(); }">AutoSync (30 sec)</label> |
				<a onclick="syncer.clearTimer(); syncer.sync();">Sync now!</a> |
				<a onclick="showCreate();">New table</a> | <a href="samples/index.html">Samples</a> |
				<img id="indicator" alt="Online mode" src="images/cleardot.gif" class="offline">
			</div>
			
			<a id="installGearsLink" href="http://gears.google.com/?action=install&message=
					install Gears to use my site&return=http://localhost/">install Gears!!</a>
		</div>
		<div id="tableList">
			<a href="javascript: refreshTableList();">Table List:</a>
			<div id="tableListEntries"></div>
		</div>
		<div id="tableDetails">
			<div id="tableContent">
			</div>
			<div id="create" style="display: none;">
				<div id="createHeader">
				Create table
				</div>
				<form id="createForm" onsubmit="createTable(); return false;">
					<div id="create0">
					Table name: 
						<input id="tableName" type="text" class="createInput"/>
						<label style="display: none;"><input id="createIfNotExists" type="checkbox">if not exists</label>
					</div>
					<table id="createTable">
						<thead>
							<tr class="bold">
								<td></td>
								<td>Column Name</td>
								<td>Data Type</td>
								<td>Primary Key?</td>
								<td>Unique?</td>
								<td>Allow NULL?</td>
							</tr>
						</thead>
						<tbody id="createTableBody"></tbody>
					</table>
					<div><a onclick="createColumn(document.getElementById('createTableBody'), document.getElementById('createTableBody').childNodes.length + 1);">more column</a></div>
					<div>
						<input type="button" value="create" onclick="createTable();"/>
					</div>
					
				</form>
			</div>
		</div>
		<div id="info"></div>
		<div id="gearsinfo">
			<table id="localserverinfo" class="tableinfo">
				<tr>
					<td class="tdheader">localserver initialization: </td>
					<td id="localserver_onprogress" class="tdinfo"></td>
					<td id="localserver_oncomplete" class="tdinfo"></td>
					<td id="localserver_onerror" class="tdinfo"></td>
				</tr>
			</table>
		</div>
	</body>
</html>
